<template>
    <textarea name="" id="" cols="30" rows="10" @input="edit"></textarea>
    <div id="content" v-html="content"></div>
</template>
<style>
#content {
    width: 300px;
    min-height: 100px;
    border: 1px solid red;
}
</style>
<script>

//1.安装marked库

import {marked} from "marked"

export default {
    data() {
        return {
            content: ""
        }
    },
    methods: {
        edit(e) {
            //获取输入框的输入内容
            let value = e.target.value;

            //2.调用marked.parse,将输入内容转换成markedown格式

            let output = marked.parse(value)

            //3.将输出内容展示到页面上

            console.log(output)
            this.content = output
        }
    }
}

</script>